跳到主要內容 跳到文件導覽
在 GitHub 上檢視

開始使用 Bootstrap

Bootstrap 是功能強大的前端工具組。在幾分鐘內就能建構任何東西，從原型到成品。

在此頁面上

快速入門

透過 CDN 加入 Bootstrap 的生產就緒 CSS 和 JavaScript，無需任何建置步驟即可開始使用。在這個 Bootstrap CodePen 示範 中實際操作看看。


  1. 在專案根目錄中建立一個新的 index.html 檔案。也加入 <meta name="viewport"> 標籤，以在行動裝置中獲得 適當的回應行為。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. 包含 Bootstrap 的 CSS 和 JS。將 <link> 標籤放入 <head> 中以取得我們的 CSS，並將 <script> 標籤放入我們的 JavaScript 程式集（包含用於定位下拉式選單、彈出視窗和工具提示的 Popper）中，並置於 </body> 之前。進一步了解我們的 CDN 連結。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

    您也可以分別包含 Popper 和我們的 JS。如果您不打算使用下拉式選單、彈出視窗或工具提示，請透過不包含 Popper 來節省一些 KB。

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

  3. 哈囉，世界！在您選擇的瀏覽器中開啟頁面，以查看您的 Bootstrapped 頁面。現在，您可以透過建立自己的 版面、加入數十個 元件，並使用 我們的官方範例，開始使用 Bootstrap 建置。

作為參考，以下是我們的 CDN 主要連結。

說明 網址
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

您也可以使用 CDN 來擷取 內容頁面中列出的任何其他組建。

後續步驟

JS 組件

好奇哪些組件明確需要我們的 JavaScript 和 Popper？如果您對一般頁面結構完全不確定，請繼續閱讀範例頁面範本。

  • 用於關閉的快訊
  • 用於切換狀態和核取方塊/單選按鈕功能的按鈕
  • 用於所有投影片行為、控制項和指標的輪播
  • 用於切換內容可見度的折疊
  • 用於顯示和定位的下拉選單（也需要 Popper）
  • 用於顯示、定位和捲動行為的模態視窗
  • 用於延伸我們的折疊和離畫布外掛程式以實作回應式行為的導覽列
  • 具備切換內容窗格的標籤外掛程式的導覽
  • 用於顯示、定位和捲動行為的離畫布
  • 用於捲動行為和導覽更新的捲動偵測
  • 用於顯示和關閉的提示
  • 用於顯示和定位的工具提示和浮動提示（也需要 Popper）

重要的全域

Bootstrap 使用少數重要的全域樣式和設定，這些幾乎都專門用於標準化跨瀏覽器樣式。我們深入探討一下。

HTML5 文件類型

Bootstrap 需要使用 HTML5 文件類型。沒有它，您會看到一些時髦且不完整的樣式。

<!doctype html>
<html lang="en">
  ...
</html>

視窗 meta

Bootstrap 採用行動裝置優先的開發方式，此策略是先針對行動裝置最佳化程式碼，再使用 CSS 媒體查詢視需要擴大元件。若要確保所有裝置都能正確呈現和觸控縮放，請將回應式視窗標籤加入您的 <head>。

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以在 快速入門 中看到此範例實際運作。

框大小

為了在 CSS 中進行更直接的調整大小，我們將全域 box-sizing 值從 content-box 切換為 border-box。這可確保 padding 不會影響元素最終計算出的寬度，但可能會導致部分第三方軟體（例如 Google 地圖和 Google 自訂搜尋引擎）出現問題。

在極少數需要覆寫的情況下，請使用類似以下的程式碼

.selector-for-some-widget {
  box-sizing: content-box;
}

使用上述程式碼片段，巢狀元素（包括透過 ::before 和 ::after 產生的內容）都將繼承 .selector-for-some-widget 指定的 box-sizing。

在 CSS Tricks 瞭解更多關於框模型和調整大小的資訊。

重新啟動

為了改善跨瀏覽器呈現，我們使用 重新啟動 修正瀏覽器和裝置間的不一致性，同時對常見 HTML 元素提供更具觀點的重設。

社群

透過這些有用的資源，隨時掌握 Bootstrap 的開發進度，並與社群聯繫。

  • 閱讀並訂閱 官方 Bootstrap 部落格。
  • 在 我們的 GitHub 討論區 發問並探索。
  • 在 社群 Discord 或 Bootstrap subreddit 上討論、發問等。
  • 在 IRC 與其他 Bootstrappers 聊天。在 irc.libera.chat 伺服器，在 #bootstrap 頻道。
  • 實作協助可在 Stack Overflow（標籤 bootstrap-5）中找到。
  • 開發人員應在透過 npm 或類似傳送機制散布時，使用關鍵字 bootstrap 在修改或新增 Bootstrap 功能的套件上，以獲得最大的可發現性。

您也可以追蹤 @getbootstrap on Twitter 以獲得最新八卦和精采音樂影片。